<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/atom.xml" title="renhao" type="application/atom+xml">






<meta name="description" content="本文总结下面试中常被问到的 react 问题。">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试总结 react 部分">
<meta property="og:url" content="https://huangrenhao.gitee.io/2020/09/24/react-interview/index.html">
<meta property="og:site_name" content="renhao">
<meta property="og:description" content="本文总结下面试中常被问到的 react 问题。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-09-24T06:46:51.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试总结 react 部分">
<meta name="twitter:description" content="本文总结下面试中常被问到的 react 问题。">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://huangrenhao.gitee.io/2020/09/24/react-interview/">





  <title>前端面试总结 react 部分 | renhao</title>
  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">renhao</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://huangrenhao.gitee.io/2020/09/24/react-interview/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="renhao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="renhao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">前端面试总结 react 部分</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-09-24T09:51:13+08:00">
                2020-09-24
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/interview/" itemprop="url" rel="index">
                    <span itemprop="name">interview</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2020/09/24/react-interview/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2020/09/24/react-interview/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2.6k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  9
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>本文总结下面试中常被问到的 react 问题。 <a id="more"></a></p>
<h3 id="react-的渲染过程"><a href="#react-的渲染过程" class="headerlink" title="react 的渲染过程"></a>react 的渲染过程</h3><h3 id="react-生命周期方法"><a href="#react-生命周期方法" class="headerlink" title="react 生命周期方法"></a>react 生命周期方法</h3><ul>
<li><p>mounting阶段：constructor() &gt; getDerivedStateFromProps() &gt; <s>render &gt;</s> componentDidMount</p>
</li>
<li><p>updating 阶段：getDerivedStateFromProps() &gt; shouldComponentUpdate() &gt;<s> render &gt; </s>getSnapShotBeforeUpdate &gt; componentDidUpdate</p>
</li>
<li><p>unmounting 阶段：componentWillUnmount</p>
</li>
</ul>
<p>React v16 将被丢弃的生命周期方法：componentWillMount、componentWillReceiveProps、componentWillUpdate，v16.3 中这三个方法带 <code>UNSAFE_</code>前缀。这三个生命周期方法被认为经常被误解和滥用，并且这些生命周期的代码在未来的 react 版本中存在缺陷（一旦启用了异步渲染）。</p>
<blockquote>
<p>在 componentWillMount、componentWillReceiveProps 中调用 this.setState 不会触发 re-render，而是进行 state 合并，并且在之后的几个生命周期方法中都不能得到最新的 state，只有 render 执行之后才能得到最新 state。</p>
<p>在 shouldComponentUpdate、componentWillUpdate 中调用 setState 会造成循环调用直到耗光浏览器内存。</p>
</blockquote>
<p>static <strong>getDerivedStateFromProps</strong>：在实例化组件之后及重新渲染组件之前调用，返回一个对象用于更新 state，或者返回 null 指示新 props 不需更新。使用场景：更新 state 以响应 props 的更改可以放在这里</p>
<p><strong>getSnapShotBeforeUpdate</strong>：在 DOM 更新之前被调用，返回值作为第三个值传递给 componentDidUpdate。使用场景：在列表中保持滚动位置，采用以前的生命周期方法 componentWillUpdate+componentDidUpdate 可以实现，但异步渲染中 reconciliation 阶段生命周期方法（如 componentWillUpdate、shouldComponentUpdate）与 commit 阶段生命周期方法（如 componentDidUpdate）可能存在延迟，如果用户在这段时间内做了类似调整窗口大小的操作，则 componentWillUpdate 读取的值可能失效，解决这个问题就是使用新的 commit 阶段生命周期 getSnapShotBeforeUpdate ，在数据发生变化之前立即调用该方法（如在更新 DOM 之前）。</p>
<blockquote>
<p>参考</p>
<ul>
<li><a href="https://www.imooc.com/article/27954?block_id=tuijian_wz" target="_blank" rel="noopener">react v16.3 即将更改的生命周期</a></li>
</ul>
</blockquote>
<h3 id="shouldComponentUpdate-使用实例"><a href="#shouldComponentUpdate-使用实例" class="headerlink" title="shouldComponentUpdate 使用实例"></a>shouldComponentUpdate 使用实例</h3><p>shouldComponnetUpdate 比较的是值的引用。引用类型的数据内部没有改动，但引用变了也会触发渲染</p>
<ul>
<li>state 值不发生变化的 setState 会导致重渲染，如调用 setState，即使设置的值还是原来的值，也会重新渲染</li>
<li>组件的 state 和从父组件接收到的 props 都没有变化也会导致重渲染，比如一个数组中只有一个项改变，但其他依赖此数组的没有变动的项也会重新渲染</li>
</ul>
<h3 id="function-component-与-class-component"><a href="#function-component-与-class-component" class="headerlink" title="function component 与 class component"></a>function component 与 class component</h3><p>函数式组件存在的问题、class 组件存在的问题：class组件随着项目变大生命周期逻辑过于耦合、庞大，函数组件可以更细粒。class组件需要走实例化流程，但可以使用装饰器。函数组件就不能使用装饰器了，函数组件ref需要forwardRef，不用纠结this。如果代码量都很多，函数组件可读性高一些</p>
<p>class 组件中：</p>
<ul>
<li>生命周期钩子函数逻辑混乱，多个生命周期函数内逻辑有重复</li>
<li>class 中的 this指向问题</li>
</ul>
<h3 id="react-hook-中-usememo、usecallback"><a href="#react-hook-中-usememo、usecallback" class="headerlink" title="react hook 中 usememo、usecallback"></a>react hook 中 usememo、usecallback</h3><p><code>useEffect</code>不再区分 <code>mount update</code>两个状态，这意味着函数组件的每一次调用都会执行其内部的所有逻辑，那么会带来较大的性能损耗。</p>
<p><code>useCallback</code>和 <code>useMemo</code>的参数跟 <code>useEffect</code>一致，他们之间最大的区别是 <code>useEffect</code>会用于处理副作用，而前两个hooks不能。</p>
<p><code>useCallback</code>和 <code>useMemo</code>都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，<code>useMemo</code>返回缓存的 <strong>变量</strong>，<code>useCallback</code>返回缓存的 <strong>函数</strong></p>
<p>React.memo() 是专门给 function component 提供的高阶组件，可以指定一个参数，可以相当于 shouldComponentUpdate 的作用。</p>
<p>局部 pure：React.memo() 在最外层包装了整个组件，局部 pure 就是希望 compunent 的部分不要进行 re-render。</p>
<p>在子组件不需要父组件的值和函数的情况下，只需要使用 <code>memo</code> 函数包裹子组件即可。如果有函数传递给子组件，使用 <code>useCallback</code>。如果有值传递给子组件，使用 <code>useMemo</code>。<code>useEffect</code>、<code>useMemo</code>、<code>useCallback</code> 都是<strong>自带闭包</strong>的。也就是说，每一次组件的渲染，其都会捕获当前组件函数上下文中的状态(<code>state</code>, <code>props</code>)，所以每一次这三种hooks的执行，反映的也都是<strong>当前的状态</strong>，你无法使用它们来捕获上一次的状态。对于这种情况，我们应该使用 <code>ref</code> 来访问。</p>
<h4 id="useMemo："><a href="#useMemo：" class="headerlink" title="useMemo："></a>useMemo：</h4><ul>
<li>返回一个 memoized 值，只有当依赖项变化才会重新计算值，值不变不会重新触发渲染逻辑</li>
<li>useMemo 是在 render 期间执行的，故不能进行一些额外副操作，如网络请求。</li>
<li>没有提供依赖数组则每次都会重新计算 memoized 值</li>
</ul>
<h4 id="useCallback"><a href="#useCallback" class="headerlink" title="useCallback"></a>useCallback</h4><p>返回的是缓存的函数，根据传入的依赖项是否发生变化从而决定是否返回一个新函数</p>
<blockquote>
<p><a href="https://juejin.im/post/5e8ee89a518825739c73517b#heading-9" target="_blank" rel="noopener">参考</a></p>
</blockquote>
<h3 id="react-16-的异步渲染具体指的是哪里？和-vue-的异步更新-dom-有什么区别？"><a href="#react-16-的异步渲染具体指的是哪里？和-vue-的异步更新-dom-有什么区别？" class="headerlink" title="react 16 的异步渲染具体指的是哪里？和 vue 的异步更新 dom 有什么区别？"></a>react 16 的异步渲染具体指的是哪里？和 vue 的异步更新 dom 有什么区别？</h3><p>异步渲染直到是在渲染完成之前可能被中断，react 异步渲染通过 fiber 将 reconciler 过程拆分成了一个个小任务，并在完成了小任务之后暂停执行 js 代码，然后检查是否有需要更新的内容和需要响应的事件，做出相应的处理后再继续执行 js 代码。而之前的 reconciler 过程像是一个递归执行的函数，reconciler 期间任何交互和渲染都会被阻塞。而利用 fiber 实现的 reconciler 是基于优先级和模拟 requestIdleCallback 的异步调度算法，从而实现在浏览器更新帧动画后的剩余事件执行 js 代码更新，超时则暂停更新任务，同时根据任务优先级来动态调整任务调度。fiber 的更新有两个阶段：</p>
<ul>
<li>reconciliation 阶段：计算前后 dom 树的差异</li>
<li>commit 阶段：将把更新渲染到页面上</li>
</ul>
<p>第一个阶段可以被打断（可能会导致 commit 前的这些生命周期函数多次执行），因为可能需要暂停下来去执行其他优先级更高的任务。commit 阶段不会被打断，一口气把更新渲染到页面上。饥饿问题指的是高优先级的任务一直插入，导致低优先级的任务无法得到机会执行，官方解决方案是尽量复用已经完成的操作来缓解。</p>
<blockquote>
<p>参考：</p>
<ul>
<li><a href="https://segmentfault.com/a/1190000019095681" target="_blank" rel="noopener">react 中的异步渲染</a></li>
</ul>
</blockquote>
<h3 id="redux-优缺点"><a href="#redux-优缺点" class="headerlink" title="redux 优缺点"></a>redux 优缺点</h3><p>Pure。这是 Redux 标榜的优势，让状态可预测，方便测试。然而这是一个理想情况，实际情况中全是 Ajax 等各种异步的副作用，Redux 本身是无能为力的。所以说 Redux 保证了自己的纯粹，把脏活累活都给别人做了，衍生出了 <a href="https://link.zhihu.com/?target=https%3A//github.com/gaearon/redux-thunk" target="_blank" rel="noopener">redux-thunk</a>，<a href="https://link.zhihu.com/?target=https%3A//github.com/redux-saga/redux-saga" target="_blank" rel="noopener">redux-saga</a>，<a href="https://link.zhihu.com/?target=https%3A//github.com/redux-saga/redux-saga" target="_blank" rel="noopener">redux-observable</a> 等中间件，非常散乱。</p>
<p>啰嗦。毕竟增加了 Action 和 Reducer，所以即便想进行一个小的状态变化也会需要更改好几个地方。另一方面，JS 缺乏一个优秀的类型系统，哪怕引入了 TS，其类型系统，模式匹配等也赶 Haskell/Elm 等有比较大的差距。这也导致 Redux 这种函数式写法显得非常啰嗦。</p>
<p>不是分形（Fractal）的。Redux 架构里，状态是存在于顶层的一棵树，通过 Connect 和组件连在一起，单个组件是无法独立工作的。而分形的架构里，组件内部有自己的状态机制，单个组件可以独立工作，也可以作为子组件。而非分形的架构里，视图可以复用，状态也可以，却很难将二者作为一个整体的组件来复用。<a href="https://link.zhihu.com/?target=https%3A//guide.elm-lang.org/architecture/" target="_blank" rel="noopener">Elm-Architecture</a>，<a href="https://link.zhihu.com/?target=https%3A//github.com/cyclejs/cyclejs" target="_blank" rel="noopener">Cycle.js</a>，<a href="https://link.zhihu.com/?target=https%3A//github.com/paldepind/functional-frontend-architecture" target="_blank" rel="noopener">Functional-Frontend-Architecture</a>，<a href="https://link.zhihu.com/?target=https%3A//github.com/foxdonut/meiosis" target="_blank" rel="noopener">Meiosis</a> 等都是分形的架构，Redux 却不是。关于分形，Cycle.js 的作者在 <a href="https://link.zhihu.com/?target=https%3A//staltz.com/unidirectional-user-interface-architectures.html" target="_blank" rel="noopener">这篇文章</a> 里有详细的阐述。</p>
<h3 id="redux-中间件是干什么的，怎么做的，有哪些异步请求处理插件，说一下-redux-thunk"><a href="#redux-中间件是干什么的，怎么做的，有哪些异步请求处理插件，说一下-redux-thunk" class="headerlink" title="redux 中间件是干什么的，怎么做的，有哪些异步请求处理插件，说一下 redux-thunk"></a>redux 中间件是干什么的，怎么做的，有哪些异步请求处理插件，说一下 redux-thunk</h3><blockquote>
<p><strong>在 JavaScript 语言中，Thunk 函数替换的不是表达式，而是多参数函数，将其替换成单参数的版本，且只接受回调函数作为参数。</strong>这与函数柯里化还是有点区别，所谓函数柯里化就是把一个多参数的函数转化为单参数函数，并返回接受余下的参数而且返回结果的新函数。</p>
</blockquote>
<blockquote>
<p>参考：</p>
<ul>
<li><a href="http://www.ruanyifeng.com/blog/2015/05/thunk.html" target="_blank" rel="noopener">Thunk 函数的含义 阮一峰</a></li>
</ul>
</blockquote>
<h3 id="react、vue-等与-jquery-的区别"><a href="#react、vue-等与-jquery-的区别" class="headerlink" title="react、vue 等与 jquery 的区别"></a>react、vue 等与 jquery 的区别</h3><ol>
<li><p>数据驱动 vs 事件驱动</p>
<ul>
<li>数据与视图分离：vue 中数据与视图时分离的，所谓视图指的是 dom，jQuery 中数据与视图没有分离，混在一块不符合开放封闭原则，对扩展开放，对修改封闭。</li>
<li>以数据驱动视图：vue 中只关心数据变化，而 jQuery 是干预视图的修改，直接以 api 操作修改 dom。</li>
</ul>
</li>
<li><p>框架与库之间最本质区别在于控制权：</p>
<ul>
<li>库：库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；</li>
<li>框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。</li>
</ul>
<p>在实际中，像angular、backbone、vue就属于框架，而jQuery、react、underscore就是库，React和react-router, react-redux结合起来才叫框架，本身只是充当一个前端渲染的库而已。在前者中我们完全可以自由的使用后者，同时也可以没有前者的基础之上使用后者，都是很自由，控制权始终在我们的手中，但是使用框架时候就必须按照它的规范来进行模块化的开发；react就是纯粹写UI组件的，没有什么异步处理机制、模块化、表单验证这些。</p>
</li>
</ol>
<h3 id="react-中循环中的-key-的作用"><a href="#react-中循环中的-key-的作用" class="headerlink" title="react 中循环中的 key 的作用"></a>react 中循环中的 key 的作用</h3>
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/09/24/vue-interview/" rel="next" title="前端面试总结 vue 部分">
                <i class="fa fa-chevron-left"></i> 前端面试总结 vue 部分
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/09/24/css-interview/" rel="prev" title="前端面试总结 css 部分">
                前端面试总结 css 部分 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">renhao</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">94</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#react-的渲染过程"><span class="nav-number">1.</span> <span class="nav-text">react 的渲染过程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#react-生命周期方法"><span class="nav-number">2.</span> <span class="nav-text">react 生命周期方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#shouldComponentUpdate-使用实例"><span class="nav-number">3.</span> <span class="nav-text">shouldComponentUpdate 使用实例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#function-component-与-class-component"><span class="nav-number">4.</span> <span class="nav-text">function component 与 class component</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#react-hook-中-usememo、usecallback"><span class="nav-number">5.</span> <span class="nav-text">react hook 中 usememo、usecallback</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#useMemo："><span class="nav-number">5.1.</span> <span class="nav-text">useMemo：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#useCallback"><span class="nav-number">5.2.</span> <span class="nav-text">useCallback</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#react-16-的异步渲染具体指的是哪里？和-vue-的异步更新-dom-有什么区别？"><span class="nav-number">6.</span> <span class="nav-text">react 16 的异步渲染具体指的是哪里？和 vue 的异步更新 dom 有什么区别？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#redux-优缺点"><span class="nav-number">7.</span> <span class="nav-text">redux 优缺点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#redux-中间件是干什么的，怎么做的，有哪些异步请求处理插件，说一下-redux-thunk"><span class="nav-number">8.</span> <span class="nav-text">redux 中间件是干什么的，怎么做的，有哪些异步请求处理插件，说一下 redux-thunk</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#react、vue-等与-jquery-的区别"><span class="nav-number">9.</span> <span class="nav-text">react、vue 等与 jquery 的区别</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#react-中循环中的-key-的作用"><span class="nav-number">10.</span> <span class="nav-text">react 中循环中的 key 的作用</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">renhao</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">265.9k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: '2P1xqUWiCoNm14MH4yhURlJi-gzGzoHsz',
        appKey: 'uJN0uagHIVgXtBO1OuLV9Ban',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

</body>
</html>
